<template>
  <div class="coupons-container">
    <!-- 优惠券标签页 -->
    <el-tabs v-model="activeTab" class="coupon-tabs">
      <el-tab-pane label="可使用" name="available">
        <div class="coupons-list">
          <div v-for="(coupon, index) in availableCoupons"
               :key="index"
               class="coupon-item"
          >
            <div class="coupon-tag">优惠券</div>
            <div class="coupon-content">
              <div class="coupon-left">
                <span class="coupon-amount">{{ coupon.amount }}</span>
                <span class="coupon-unit">元</span>
              </div>
              <div class="coupon-right">
                <div class="coupon-condition">满{{ coupon.minAmount }}元可使用</div>
                <el-button type="danger" size="small" round>立即使用</el-button>
              </div>
            </div>
          </div>
          <el-empty v-if="availableCoupons.length === 0" description="暂无可用优惠券" />
        </div>
      </el-tab-pane>

      <el-tab-pane label="已使用" name="used">
        <div class="coupons-list">
          <div v-for="(coupon, index) in usedCoupons"
               :key="index"
               class="coupon-item used"
          >
            <div class="coupon-tag">已使用</div>
            <div class="coupon-content">
              <div class="coupon-left">
                <span class="coupon-amount">{{ coupon.amount }}</span>
                <span class="coupon-unit">元</span>
              </div>
              <div class="coupon-right">
                <div class="coupon-condition">满{{ coupon.minAmount }}元可使用</div>
                <div class="coupon-used-time">使用时间：{{ coupon.usedTime }}</div>
              </div>
            </div>
          </div>
          <el-empty v-if="usedCoupons.length === 0" description="暂无已使用优惠券" />
        </div>
      </el-tab-pane>

      <el-tab-pane label="已过期" name="expired">
        <div class="coupons-list">
          <div v-for="(coupon, index) in expiredCoupons"
               :key="index"
               class="coupon-item expired"
          >
            <div class="coupon-tag">已过期</div>
            <div class="coupon-content">
              <div class="coupon-left">
                <span class="coupon-amount">{{ coupon.amount }}</span>
                <span class="coupon-unit">元</span>
              </div>
              <div class="coupon-right">
                <div class="coupon-condition">满{{ coupon.minAmount }}元可使用</div>
                <div class="coupon-expire-time">过期时间：{{ coupon.expireTime }}</div>
              </div>
            </div>
          </div>
          <el-empty v-if="expiredCoupons.length === 0" description="暂无过期优惠券" />
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const activeTab = ref('available')

// 模拟优惠券数据
const availableCoupons = ref([
  { amount: 20, minAmount: 100, expireTime: '2024-03-01' },
  { amount: 50, minAmount: 300, expireTime: '2024-03-01' },
  { amount: 10, minAmount: 50, expireTime: '2024-03-01' },
  { amount: 5, minAmount: 50, expireTime: '2024-03-01' }
])

const usedCoupons = ref([
  { amount: 30, minAmount: 200, usedTime: '2024-01-15' }
])

const expiredCoupons = ref([
  { amount: 15, minAmount: 100, expireTime: '2024-01-01' }
])
</script>

<style scoped>
.coupons-container {
  max-width: 800px;
  margin: 20px auto;
  padding: 0 20px;
}

.coupon-tabs {
  background: #fff;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
}

.coupons-list {
  margin-top: 20px;
}

.coupon-item {
  position: relative;
  margin-bottom: 16px;
  background: linear-gradient(90deg, #ff4d4f 0%, #ff7875 100%);
  border-radius: 8px;
  overflow: hidden;
  color: #fff;
}

.coupon-item.used {
  background: linear-gradient(90deg, #909399 0%, #c0c4cc 100%);
}

.coupon-item.expired {
  background: linear-gradient(90deg, #909399 0%, #c0c4cc 100%);
  opacity: 0.8;
}

.coupon-tag {
  position: absolute;
  top: 0;
  left: 0;
  padding: 4px 8px;
  background: rgba(0, 0, 0, 0.1);
  font-size: 12px;
}

.coupon-content {
  display: flex;
  align-items: center;
  padding: 20px;
  position: relative;
}

.coupon-content::before {
  content: '';
  position: absolute;
  left: -8px;
  top: 50%;
  width: 16px;
  height: 16px;
  background: #fff;
  border-radius: 50%;
  transform: translateY(-50%);
}

.coupon-content::after {
  content: '';
  position: absolute;
  right: -8px;
  top: 50%;
  width: 16px;
  height: 16px;
  background: #fff;
  border-radius: 50%;
  transform: translateY(-50%);
}

.coupon-left {
  flex: 0 0 auto;
  margin-right: 20px;
  text-align: center;
}

.coupon-amount {
  font-size: 36px;
  font-weight: bold;
}

.coupon-unit {
  font-size: 16px;
  margin-left: 4px;
}

.coupon-right {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.coupon-condition {
  font-size: 14px;
}

.coupon-used-time,
.coupon-expire-time {
  font-size: 12px;
  opacity: 0.8;
}

/* 响应式调整 */
@media screen and (max-width: 480px) {
  .coupons-container {
    padding: 10px;
  }

  .coupon-content {
    padding: 15px;
  }

  .coupon-amount {
    font-size: 28px;
  }

  .coupon-unit {
    font-size: 14px;
  }
}
</style>